


<!DOCTYPE html>
<!--
Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
	<meta charset="utf-8">
	<title>CKEditor Sample</title>
	<script src="../ckeditor.js"></script>
	<script src="js/sample.js"></script>
	<script src="js/jquery.min.js"></script>
	<script src="../../css/bootstrap.min.css"></script>
	<script src="../../js/config.js"></script>
	<link rel="stylesheet" href="css/samples.css">
	<link rel="stylesheet" href="toolbarconfigurator/lib/codemirror/neo.css">
    <style>

        .content{
            margin: 0 auto;
            width: 800px;
        }
    </style>
</head>
<body>
<header>
<div style="height: 50px;width: 100%;background-image: url(img/top_back.png);">
    &nbsp;&nbsp;&nbsp;&nbsp;<img src="img/logos.png">
</div>
<h1 align="center">首页轮播图发布</h1>
</header>

<main style="  background-color: #f9f9f9;">

<div class="content">
        <div class="form-group">
            <div class="col-sm-10">
                <label for="title" class="col-sm-2">标题:</label>
                <input type="text" name="title" id="title" style="width: 700px"/>
            </div>
        </div>
        <br/>
        <div class="form-group">

            <div class="col-sm-10">
                <label for="author" class="control-label">作者:</label>
                <input type="text" name="author" id="author"/>
            </div>
        </div>
        <br/>
        <div class="form-group">
            <table>
                <tr>
                    <td><label for="introduce" >简介:</label></td>
                    <td> <textarea name="introduce" rows="3" id="introduce" style="width: 700px;"></textarea></td>
                </tr>
            </table>



        </div>
        <br/>

        <div class="form-group">
            <div class="col-sm-10">
                <label for="post_file" class="control-label">展示图片:</label>
                <input type="file" name="post_file" id="post_file">
            </div>
            <canvas id="get_image" style="display: none"></canvas>
            <canvas id="edit_pic" width="1080" height="400" style="display: none"></canvas>
        </div>

        <br/>
        <textarea name="editor" id="editor"></textarea>
        <input type="hidden" name="filetype" id="filetype">
        <br/>
        <div class="form-group">

            <div class="col-sm-10">
                <label for="newsclass" class="control-label">分类:</label>
                <select class="form-control" id="newsclass" name="newsclass">
                    <option value="原创">原创</option>
                    <option value="转载">转载</option>
                </select>
                <input type="hidden" name="classname" id="classname">
            </div>
        </div>
        <br/>
        <div class="form-group">
            <button  name="发布"  id="submit">发布</button>
        </div>


</div>
</main>

<footer class="footer-a grid-container">

</footer>

<script>
var str = "<!DOCTYPE html>\n" +
        "<html>\n" +
        "<head lang=\"en\">\n" +
        "    <meta charset=\"UTF-8\">\n" +
        "    <meta http-equiv=\"refresh\" content=\"2;url=/resource/html/index.html\">\n" +
        "    <title></title>\n" +
        "</head>\n" +
        "<body>\n" +
        "<h1>上传成功，2秒后返回主页</h1>\n" +
        "</body>\n" +
        "\n" +
        "</html>";

	initSample();


    var newsclass = $.parseJSON(rotateclass);

            var select = $('#newsclass');
            select.empty();
            var ope = "";
            $.each(newsclass,function(i,item){
                ope+= '<option value="'+item.id+'">'+item.name+'</option>'
            });
            select.append(ope)





</script>

<script type="text/javascript">
    var fd=new FormData();
    var _URL = window.URL || window.webkitURL;
    var getImage = document.getElementById('get_image');
    var editPic = document.getElementById('edit_pic');
    var postFile = {
        init: function() {
            var t = this;
            $('#submit').on('click', t.handleFiles);
            document.getElementById('post_file').addEventListener("change", t.setsize, false);
        },
        setsize:function(){
            var file, img;
            if ((file = this.files[0])) {
                img = new Image();
                img.onload = function () {
                    getImage.width= this.width;
                    getImage.height = this.height;
                };
                img.src = _URL.createObjectURL(file);
            }
        },
        handleFiles: function() {
            var fileList = $('#post_file').get(0).files[0];

            var oFReader = new FileReader();
            oFReader.readAsDataURL(fileList);
            oFReader.onload = function () {
                postFile.paintImage(oFReader.result);
            };
        },
        paintImage: function(url) {
            var t = this;
            var createCanvas = getImage.getContext("2d");
            var img = new Image();
            img.src = url;
            img.onload = function(){
                createCanvas.drawImage(img,0,0);
                t.imgUrl = getImage.toDataURL();
                postFile.cutImage();
            };
        },
        cutImage: function() {

            var t = this;
            var ctx = editPic.getContext('2d');
            var images = new Image();
            images.src = t.imgUrl;

            images.onload = function(){
                ctx.drawImage(images,0, 0, 1080, 400); //裁剪图片
//                document.getElementById('show_edit').getElementsByTagName('img')[0].src = t.editPic.toDataURL("image/jpg");
                var data=editPic.toDataURL();
                data=data.split(',')[1];
                data=window.atob(data);
                var ia = new Uint8Array(data.length);
                for (var i = 0; i < data.length; i++) {
                    ia[i] = data.charCodeAt(i);
                }
                var  types = document.getElementById("post_file").value.split('.');
                var type = types[types.length-1];

//                title author introduce editor filetype newsclass
                var blob=new Blob([ia], {type:"image/png"});
                fd.append('file',blob);
                fd.append("title", $('#title').val());
                fd.append("author", $('#author').val());
                fd.append("filetype", type);
                fd.append("introduce", $('#introduce').val());
                fd.append("editor", CKEDITOR.instances.editor.getData());
                fd.append("newsclass", $('#newsclass').val());
                fd.append("classname", $("#newsclass").find("option:selected").text());

                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function(){

                    if( xhr.readyState == 4 && xhr.status == 200 ){
                        callback(xhr.responseText);
                    }else if( xhr.readyState == 4 && xhr.status == 406 ){
                        alert("上传失败，文件过大");
                    }
                };
                //发送文件和表单自定义参数
                xhr.open("POST",  'http://localhost:8099/news',true);

                xhr.send(fd);
            };


        }
    };
    postFile.init();
    function callback(data){
        if(data.indexOf("成功") != -1){
            alert("上传成功");
            window.location.replace("/resource/html/index.html");
        }else{
            alert("上传失败");
        }
    }
</script>

</body>
</html>
